<template>
  <div class="center" :class="dayModel===true?'':'bgColor'">
    <div class="myHeight">
      <img src="../assets/image/2.jpg" width="80" height="80" style="border-radius: 80px">
    </div>
    <div class="NameFont">Heaven</div>
    <el-row class="myFont1">
      <el-col :sm={offset:4,span:5} :xs="{offset:2,span:5}">
        <a href="/archive" :class="dayModel===false?'lColor':''">
          <div>文章</div>
          <div class="margin-t" v-text="counts.pageCount"></div>
        </a>
      </el-col>
      <el-col :sm={offset:1,span:5} :xs="{offset:2,span:5}">
        <a href="/type" :class="dayModel===false?'lColor':''">
          <div>分类</div>
          <div class="margin-t" v-text="counts.typeCount"></div>
        </a>
      </el-col>
      <el-col :sm={span:5,offset:1} :xs="{offset:2,span:5}">
        <a href="/tag" :class="dayModel===false?'lColor':''">
          <div>标签</div>
          <div class="margin-t" v-text="counts.tagCount"></div>
        </a>
      </el-col>
    </el-row>
    <div class="margin-t">
      <el-button :class="dayModel===true?'':'bButton'" @click="bookmark" class="myButton" size="mini" type="success"><i class="el-icon-price-tag"></i>加入书签</el-button>
    </div>
    <div>
      <el-button @click="goToGithub"  type="text" :class="dayModel===true?'bFColor':'lFColor'" circle class="iconfont icon-GitHub"></el-button>
      <el-button @click="QQInfo" type="text" :class="dayModel===true?'bFColor':'lFColor'" circle class="iconfont icon-QQ"></el-button>
      <el-button @click="aLiInfo" type="text" :class="dayModel===true?'bFColor':'lFColor'" circle class="iconfont icon-alipay"></el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "MyInfo",
  data(){
    return{
      counts:{}
    }
  },
  mounted(){
    axios.get("/listCount").then( (res) => {
      this.counts = res.data;
    })
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    }
  },
  methods: {
    bookmark(){
      this.$notify({
        title: '书签',
        message: '<strong>按住Ctrl+D将本页加入书签</strong>',
        position: 'bottom-left',
        dangerouslyUseHTMLString: true,
      })
    },
    goToGithub() {
      window.location.href = 'https://github.com/caihaiwen'
    },
    QQInfo(){
      this.$notify({
        title: 'QQ',
        message: '1593623458',
        position: 'bottom-left'
      })
    },
    aLiInfo() {
      this.$notify({
        title: '请我喝瓶可乐吧',
        message: '<img src="https://heavenpl.gitee.io/pic/images/aliPay.jpg" width="200"></div>',
        position: 'bottom-left',
        duration: 0,
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>

<style scoped>
.bFColor {
  color: black !important;
}
.lFColor {
  color: white !important;
}
.bButton {
  background-color: black;
  border-color: black !important;
}
.bgColor {
  background-color: #2f3133 !important;
  color: white !important;
}
.center {
  text-align: center;
  background-color: white;
  border-radius: 10px;
  transition: all .5s linear;
}
a {
  color: black;
  text-decoration: none;
}
.myHeight {
  height: 80px;
  line-height: 80px;
}
.myButton {
  width: 60%;
  margin: 0 10px;
  background-color: rgba(0, 0, 0, 0.89);
  border-color: black;
}
.myFont1 {
  font-weight: 300;
}
.margin-t-b {
  margin: 20px 0;
}
.margin-t {
  margin-top: 10px;
}
.NameFont {
  padding: 10px 0;
  /*color: black;*/
  font-size: 25px;
  font-weight: 700;
}
</style>